<template>
	<view class="pages">
		<view class="title">欢迎登录</view>
		<view class="titles">还没有账号，<span @tap="goRegister">立即注册？</span></view>
	    <view class="input-content">
			<image src="../../static/login/phone.png" class="input-img"></image>
			<input placeholder="请输入手机号" placeholder-class="placeholder" v-model="phone"/>
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入密码" placeholder-class="placeholder" v-model="password"/>
		</view>
		<view class="login" @tap="submitLogin">登录</view>
		<view class="tips" @tap="goLogin">验证码登录</view>
		<view class="tip">登录多多生活即表示同意<span>《用户协议》</span></view>
	</view>
</template>

<script>
	import { passwordLogin } from '../../api/api.js'
	export default {
		data() {
			return {
				password:'',  // 密码
				phone:'',  // 手机号
				invitationCode:'',  // 邀请码
			}
		},
		methods: {
			// 去注册
			goRegister() {
				uni.navigateTo({
					url:'./registered'
				})
			},
			goLogin() {
				uni.navigateTo({
					url:'./index'
				})
			},
			
			// 提交登录
			submitLogin() {
				if( !this.phone ) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return
				}
				if( !this.password ) {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
					return
				}
				let data = {
					phone:this.phone,
					password:this.password,
					invitationCode:this.invitationCode,
				}
				passwordLogin(data).then( res=> {
					console.log(res)
					uni.setStorageSync('token',res.data.token)
					uni.setStorageSync('phone',res.data.phone)
					uni.setStorageSync('userName',res.data.userName)
					uni.setStorageSync('invitationCode',res.data.invitationCode)
					uni.switchTab({
						url:'../index/index'
					})
				})
			}
		}
	}
</script>

<style lang="less">
    .pages {
		.title {
			margin: 200rpx 0 0 60rpx;
			font-size: 56rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 78rpx;
			letter-spacing: 2rpx;
		}
		.titles {
			margin: 12rpx 0 80rpx 60rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			span {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
			}
		}
		.input-content {
			margin-left: 60rpx;
			margin-bottom: 32rpx;
			padding-left: 92rpx;
			position: relative;
			width: 538rpx;
			height: 90rpx;
			background: #F4F8FF;
			.input-img {
				width: 44rpx;
				height: 44rpx;
				top: 23rpx;
				left: 24rpx;
				position: absolute;
			}
			input {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
			}
			.placeholder {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}
		.login {
			text-align: center;
			margin: 80rpx 0 0 60rpx;
			width: 630rpx;
			height: 90rpx;
			background: #FE3B33;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
			border-radius: 4rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
		}
	    .tips {
			margin: 32rpx 0 0 296rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FE3B33;
			line-height: 37rpx;
			text-decoration: underline;
		}
		.tip {
			margin: 317rpx 0 0 166rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
			line-height: 33rpx;
			span {
				color: #FE3B33;
			}
		}
	}
</style>
